<!-- 在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个<div>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列 -->

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">
      .box1{
         float: left;
         width: 200px;
         height: 200px;
         background-color: green;
      }

      .box2{
         width: 300px;
         height: 300px;
         background-color: red;
      }

	</style>

 </head>

 <body>
	   <div class="box1"></div>
      <div class="box2"></div>
 </body>

</html>